﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

    <style>
        .opt {
            width: 50px;
            position:absolute;
            border:1px solid black;
            opacity:0;
        }
        .opt:hover
        {
            background-color:#c0c0c0;
            cursor:pointer;
        }
        .menu {
            position:absolute;
        }
        .menutarget {
            top:100px;
            left:100px;
            position:absolute;
        }
        .menutarget2 {
            top:300px;
            left:200px;
            position:absolute;
        }
        .menutarget3 {
            top:500px;
            left:300px;
            position:absolute;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {

            $(document).keydown(function (event) {
                if (event.which == 38) circulate(-1);
                if (event.which == 40) circulate(1);
            });
            $(document).click(function (e) {
                if (isMenuOpen) {
                    closeMenu();
                    e.stopPropagation();
                }
            });

            $(".menutarget").click(function (event) {
                if (isMenuOpen) return;
                $(".menu").html("<div class='opt'>option 1</div><div class='opt'>option 2</div><div class='opt'>option 2</div>");
                var target = $(".menutarget");
                $(".menu").css("left", target.offset().left + "px");
                $(".menu").css("top", target.offset().top + "px");
                
                openMenu();
                event.stopPropagation();
            });

            $(".menutarget2").click(function (event) {
                if (isMenuOpen) return;
                $(".menu").html("<div class='opt'>option 1</div><div class='opt'>option 2</div><div class='opt'>option 3</div><div class='opt'>option 4</div><div class='opt'>option 5</div>");
                var target = $(".menutarget2");
                $(".menu").css("left", target.offset().left + "px");
                $(".menu").css("top", target.offset().top + "px");
                openMenu();
                event.stopPropagation();
            });

            $(".menutarget3").click(function (event) {
                if (isMenuOpen) return;
                $(".menu").html("<div class='opt'>option 1</div><div class='opt'>option 2</div><div class='opt'>option 3</div><div class='opt'>option 4</div><div class='opt'>option 5</div><div class='opt'>option 6</div><div class='opt'>option 7</div><div class='opt'>option 8</div><div class='opt'>option 9</div>");
                var target = $(".menutarget3");
                $(".menu").css("left", target.offset().left + "px");
                $(".menu").css("top", target.offset().top + "px");
                openMenu();
                event.stopPropagation();
            });

        });
        var isMenuOpen = false;
        var circularOffset = 0;
        function degToRad(deg) {
            return deg * Math.PI / 180;
        }

        function circulate(pos) {
            circularOffset += (360 / $(".menu").children().length) * pos;
            changeMenu(100, 1, 200, circularOffset);
        }

        function closeMenu() {
            isMenuOpen = false;
            changeMenu(1,0,500,0);
        }
        function openMenu() {
            isMenuOpen = true;
            changeMenu(100,1,500,0);
        }
        function changeMenu(radius, opacity, speed, circularOffset) {
            var itemCount = $(".menu").children().length;
            var spacingInDeg = 360 / itemCount;
            $(".menu .opt").each(function (index, element) {
                var deg = -90 + (spacingInDeg / 2) + (index * spacingInDeg) + circularOffset;
                var x = (radius * Math.cos(degToRad(deg))) + ($(element).outerWidth() / 2);
                var y = (radius * Math.sin(degToRad(deg))) - ($(element).outerHeight() / 2);;
                if (opacity != 0) $(element).show();
                $(element).delay(100 * index).animate(
                    {
                        opacity: opacity,
                        left: x + "px",
                        top: y + "px"
                    }, speed, "easeInOutSine", function () { if (opacity == 0) $(element).hide(); } );
            });
        }
    </script>
</head>
<body>
    <div class="menutarget">click here for menu with 3 items</div>
    <div class="menutarget2">click here for menu with 5 items</div>
    <div class="menutarget3">click here for menu with 9 items</div>

    <div class="menu">
        <div class="opt">option 1</div>
    </div>
    press up/down arrows to circulate items.
</body>
</html>
